<template>
  <div>
    <el-form @submit.native.prevent :inline="true" class="demo-form-inline">
      <el-form-item label="习题查询">
        <el-input
          @keyup.native.enter="submit"
          v-model="titles"
          placeholder="请输入关键字"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="exerciseData.result" style="width: 100%">
      <el-table-column prop="subjectstype" label="习题科目"></el-table-column>
      <el-table-column prop="exercise_cover" label="习题图片内容" width>
        <template slot-scope="scope">
          <img :src="scope.row.exercise_cover" width="100px" />
        </template>
      </el-table-column>
      <el-table-column prop="exercise_text" label="习题内容" width>
      </el-table-column>

      <el-table-column prop="exercise_options" label="习题选项">
      </el-table-column>
      <el-table-column prop="exercise_answers" label="习题答案">
      </el-table-column>

      <el-table-column prop="exercise_resolve" label="习题解析" width="200px">
        <template slot-scope="scope">
          <p @click="show(scope.row.exercise_resolve)" class="tooltip">
            {{ scope.row.exercise_resolve }}
          </p>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="180px">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="
              $router.push('/home/exercises-update/' + scope.row.exercise_id)
            "
            >修改</el-button
          >

          <el-button size="mini" type="danger" @click="det(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin: 10px"
      background
      :total="exerciseData.total"
      :page-size="exerciseData.pagesize"
      :current-page="exerciseData.page"
      layout="->, total, prev, pager, next, jumper"
      @current-change="changeCurrentPage"
    ></el-pagination>
    <el-dialog title="详情" :visible.sync="dialogVisible" width="60%">
      <div>{{ text }}</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import httpApi from "@/http";
export default {
  data() {
    return {
      dialogVisible: false,
      titles: "",
      text: "",
      exerciseData: {
        page: 1,
        pagesize: 10,
        result: [],
        total: 0,
      },
    };
  },
  methods: {
    // 弹框查询习题解析
    show(text) {
      console.log(111);
      this.text = text;
      this.dialogVisible = true;
    },
    // 习题模糊查询
    submit() {
      this.exerciseData.page = 1;
      this.search();
    },
    det(exercise) {
      this.$confirm("是否删除该教练信息", "提示", {
        ConfirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        httpApi.exerciseApi
          .del({ exercise_id: exercise.exercise_id })
          .then((res) => {
            if (res.data.code == 200) {
              console.log("删除习题", res);
              this.search();
              this.$message.success("删除成功");
            } else {
              this.$message.error("删除失败");
            }
          });
      });
    },
    search() {
      if (this.titles.trim()) {
        this.queryexercisehBuName();
      } else {
        this.infoExercise();
      }
    },
    infoExercise() {
      let params = {
        page: this.exerciseData.page,
        pagesize: this.exerciseData.pagesize,
      };
      httpApi.exerciseApi.queryall(params).then((res) => {
        console.log("查看习题列表", res);
        this.exerciseData.result = res.data.data.result;
        this.exerciseData.total = res.data.data.total;
      });
    },
    queryexercisehBuName() {
      let params = {
        page: this.exerciseData.page,
        pagesize: this.exerciseData.pagesize,
        title: this.titles,
      };
      httpApi.exerciseApi.queryByNameLike(params).then((res) => {
        console.log("模糊查询习题", res);
        this.exerciseData.result = res.data.data.result;
        this.exerciseData.total = res.data.data.total;
      });
    },
    changeCurrentPage(page) {
      this.exerciseData.page = page; // 修改当前页
      this.search();
    },
  },
  mounted() {
    this.infoExercise();
  },
};
</script>

<style lang="scss" scoped>
.el-tooltop_popper,
.tooltip,
.el-tooltop_popper.is-dark {
  max-width: 200px !important;
  line-height: 14px !important;
}
.tooltip {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
</style>
